<template>
    <div class="zt-select flex-s">
        <div class="flex-left flex-item fry-box">
            <el-select v-model="radioStationCode" placeholder="选择电台" class="blank-input m-10" @change="radioChange"
                style="width:200px;">
                <el-option v-for="item in stationList" :key="item.radioStationCode" :label="item.radioStationName"
                    :value="item.radioStationCode">
                </el-option>
            </el-select>
            <div class="flex-item overall-set" @click="openSet" v-if="!isStart">
                <img src="@/assets/images/stz.png" style="cursor: pointer;"/>全频谱数据设置
            </div>
            <div v-if="radioStationCode">
                <button class="bt-yellow" @click="start()" v-if="!isStart">开始</button>
                <button class="bt-yellow" @click="stop()" v-else>停止</button>
            </div>

            <div class="zt-data flex-item">
                <div>{{ formatTime }}</div>
            </div>
        </div>


        <min-dialog title="全频率设置" width="450px" :visible="frequencySet.open" @closeDialog="frequencySet.open = false">
            <template v-slot:default>
                <div class="min-dialog" style="height: 250px;padding: 10px;margin-top: 40px;">
                    <el-form :model="frequencySet" label-width="120px" v-if="frequencySet.open">
                        <el-form-item label="采集宽带设置:">
                            <el-input class="zt-input" v-model="bandwidth" placeholder="采集宽带设置"
                                style="width: 250px;"></el-input>
                            MHZ
                        </el-form-item>
                        <el-form-item label="中心频率设置:">
                            <el-input class="zt-input" v-model="central" placeholder="中心频率设置"
                                style="width: 250px;"></el-input>
                            MHZ
                        </el-form-item>
                    </el-form>
                    <el-button class="bt-blue" style="margin-left: 250px;margin-top: 50px;"
                        @click="postParameter">确认</el-button>
                </div>
            </template>
        </min-dialog>
    </div>
</template>

<script>
import { getRadioStationList } from "@/api/business/station";
import { ffbStop, ffbStart, channelStart, channelStop, playStart, playStop, recordStart, recordStop, sdrSet, queryParameter, editParameter } from "@/api/business/frequency";
import MinDialog from "@/components/TZ/MinDialog"

export default {
    name: "f-params",
    components: { MinDialog },
    // dicts: ['located_address'],
    emits: ['change', 'start', 'stop'],
    props: {
        isStart: { type: Boolean, default: false },
        // socket对象
        ws: { type: Object, default: () => { } }
    },
    computed: {
        formatTime() {
            const hours = Math.floor(this.seconds / 3600);
            const minutes = Math.floor((this.seconds % 3600) / 60);
            const seconds = this.seconds % 60;
            return `${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}`;
        }
    },
    watch: {
        isStart(val) {
            if (val) {
                this.startInter();
            } else {
                this.endInter();
            }
        }
    },
    data() {
        return {
            // 是否启动
            beFrequency: false,
            // 选择电台
            stationList: [],
            // 全频谱设置
            frequencySet: {
                open: false,
                data: {}
            },
            // 电台id
            radioStationCode: null,
            // 带宽
            bandwidth: null,
            // 中心频率 
            central: null,
            // 运行时间
            seconds: 0,
            // 运行计时函数
            interver: null,
        }
    },
    created() {
        // 获取电台集合
        this.getListAll();
        // 获取默认参数
        this.getParameter();
    },
    mounted() {
    },
    methods: {
        // 启动获取数据的计数器
        startInter() {
            this.endInter();
            this.seconds = 0;
            this.interver = setInterval(() => { this.seconds++ }, 1000)
        },
        // 停止计数器
        endInter() {
            if (this.interver) clearInterval(this.interver);
        },
        //获取电台
        getListAll() {
            getRadioStationList({ isNet: 1 }).then(response => {
                this.stationList = response.rows.filter(item => item.sdrStatus == '0')
            });
        },
        // 启动
        start() {
            this.$emit('start', {
                radioStationCode: this.radioStationCode,
                bandwidth: this.bandwidth * 10 ** 6,
                central: this.central * 10 ** 6
            })
        },
        // 停止
        stop() {
            this.$emit('stop')
        },
        // 电台选择事件
        radioChange() {
            this.$emit('change', {
                radioStationCode: this.radioStationCode,
                bandwidth: this.bandwidth * 10 ** 6,
                central: this.central * 10 ** 6
            })
        },
        // 添加前缀
        pad(value) {
            return value < 10 ? '0' + value : value;
        },
        // 查询参数
        getParameter() {
            queryParameter().then(rs => {
                if (rs.code == 200) {
                    this.bandwidth = rs.rows[0].configValue / 1000000
                    this.central = rs.rows[1].configValue / 1000000
                    this.frequencySet.data = rs.rows
                }
            });
        },
        //设置参数
        postParameter() {
            const data = {
                radioStationCode: this.radioStationCode,
                data: JSON.parse(JSON.stringify(this.frequencySet.data))
            }
            data.data[0].configValue = this.bandwidth * 10 ** 6
            data.data[1].configValue = this.central * 10 ** 6
            // 启动参数设置成功
            this.$emit('change', {
                radioStationCode: this.radioStationCode,
                bandwidth: this.bandwidth * 10 ** 6,
                central: this.central * 10 ** 6
            })
            // 将参数保存到服务器
            editParameter(data).then(rs => {
                this.frequencySet.open = false
            });
        },
        // 打开参数设置界面
        openSet() {
            if(!this.isStart){
                this.frequencySet.open = true;
            }else{
                this.$message.error("请先停止全频段再操作！")
            }
            
        },
    },
    beforeDestroy() {
        if (this.interver) clearInterval(this.interver);
    }
};
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.frequency-message-minor {
    .frequency-headline {
        background: linear-gradient(to right, #313B53, #272F43);
        height: 45px;
        line-height: 52px;
        padding-left: 10px;
        border-radius: 15px 15px 0 0;
        color: #9A9DAA;
        font-weight: 700;
    }

}

.fry-box {
    background: #171D2C;
    width: 100%;
    padding: 10px;
    border-radius: 50px;
}

.overall-set {
    cursor: pointer;
    margin-right: 30px;
    margin-left: 20px;

    img {
        width: 30px;
        margin-right: 5px;
    }

    color: #2CA6E0;
    font-size: 16px;
}

.zt-sdr {
    margin-left: 30px;

    img {
        width: 25px;
        margin-right: 5px;
    }

    .sdr-dian {
        font-size: 30px;
    }

    .sdr-text {
        margin-left: 5px;
        font-size: 16px;
    }

    color: #74C8CE;
}

.zt-data {
    // margin-left: 30px;
    margin-left: auto;
    margin-right: 20px;

    img {
        width: 20px;
        margin-right: 5px;
    }

    color: #fff;
}


.container {
    position: relative;
    //   height: 100px;
    //   width: 200px;
    //   background-color: #f0f0f0;
}

.line {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    width: 2px;
    height: 62%;
    background-color: #FFE355;
    pointer-events: none;
    /* 防止线条遮挡点击事件 */
}

.h-num-input {
    appearance: none;
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    outline: none;
    font: inherit;
    text-align: inherit;
    color: inherit;
    width: 65px;
    margin-left: 10px;

}

.h-num-input[type=number]::-webkit-inner-spin-button,
.h-num-input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
</style>